<template>
  <div id="app" class="common-layout">
    <el-container>
      <el-aside width="240px">
        <div class="home-title" @click="goHomePage()" >
          <!-- <el-image src="@/assets/favicon.ico"/> -->
          <el-icon style="margin-right: 8px;"><House /></el-icon>
          Home</div>
        <el-button class="add-chat" @click="goChatPage" round>New Chat</el-button>
      </el-aside>
      <el-container>
        <el-main>
          <router-view :key="route.path + Math.random()"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>
<script setup>
import { getThis as getThisMountToWindow } from './utils/getThis.js'
import { useRouter,useRoute } from 'vue-router';
import { House } from '@element-plus/icons-vue';
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
// 获取路由实例
const router = useRouter();
let route = useRoute();

function goChatPage() {
  let random1 = Date.now() //Math.floor(Math.random()*1000);// 生成1000以内随机数 时间戳
  router.push({ name: 'Chat',query: { id: random1} });
}
function goHomePage() {
  router.push({ name: 'Home'});
}
onMounted(() => {
  // Vue3中没有this，访问全局变量比较麻烦，手动获取this并挂载到window，页面中可以直接使用window.$this获取Vue实例
  getThisMountToWindow()
})
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #262626;
  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  height: 100vh;
  .el-aside{
    border-right: 1px solid #e4e7ed;
    padding: 20px;
    background: #f3f4f6;
    .add-chat{
      width: 100%;
      height: 40px;
    }
  }
  .el-container{
    height: 100%;
  }
  .home-title{
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    .el-image__inner{
      width: 20px;
      height: 20px;
      margin-right: 10px;
      vertical-align: middle;
    }
  }
}

body,ul,ol,li,p,h1,h2,h3,h4,h6,form,fieldset,table,td,img,div,dl,dt,dd,
input{margin:0;padding:0;}
body{font-size:16px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;border:none}
textarea{resize:none;}
a{ text-decoration:none;}
table{ border-collapse: collapse; border-spacing:0;}

/*清除浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
</style>
